<template>
  <div class="treasure-hunter-container">
    <div class="background-overlay"></div>
    <div class="game-wrapper">
      <el-card 
        class="game-card glass-morphism" 
        shadow="always"
      >
        <template #header>
          <div class="card-header">
            <h1 class="game-title">数字宝藏猎人</h1>
          </div>
        </template>

        <!-- 游戏状态 -->
        <div class="game-status">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="status-box">
                <div class="status-label">难度</div>
                <div class="status-value">{{ difficulty }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="status-box">
                <div class="status-label">积分</div>
                <div class="status-value">{{ score }}</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 游戏地图 -->
        <div class="game-map">
          <el-row :gutter="10">
            <el-col 
              v-for="(tile, index) in gameMap" 
              :key="index" 
              :span="6"
              class="map-tile"
            >
              <el-button 
                :type="getTileType(tile)" 
                :disabled="tile.revealed"
                @click="selectTile(index)"
                size="large"
                class="tile-button neon-hover"
              >
                {{ getTileContent(tile) }}
              </el-button>
            </el-col>
          </el-row>
        </div>

        <!-- 游戏控制 -->
        <div class="game-controls">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-button 
                type="success" 
                @click="startGame" 
                size="large" 
                class="control-button glow-effect"
                icon="FolderAdd"
              >
                开始游戏
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-button 
                type="danger" 
                @click="resetGame" 
                size="large" 
                class="control-button glow-effect"
                icon="RefreshRight"
              >
                重置游戏
              </el-button>
            </el-col>
          </el-row>
        </div>

        <!-- 难度选择 -->
        <div class="difficulty-selector">
          <el-select 
            v-model="difficulty" 
            placeholder="选择游戏难度"
            @change="initGameMap"
            class="difficulty-select"
          >
            <el-option 
              v-for="(config, level) in difficulties" 
              :key="level"
              :label="level" 
              :value="level"
            />
          </el-select>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  ElMessage, 
  ElNotification 
} from 'element-plus'

// 游戏逻辑保持不变，此处省略（与上一个版本相同）
// ... (之前的script内容)
</script>

<style scoped>
.treasure-hunter-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 0%, transparent 20%);
  pointer-events: none;
}

.game-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 550px;
  padding: 20px;
}

.game-card {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.125);
}

.glass-morphism {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
}

.game-title {
  font-size: 2.5rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-weight: bold;
}

.game-status {
  margin-bottom: 20px;
}

.status-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  transition: all 0.3s ease;
}

.status-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.status-value {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

.map-tile {
  margin-bottom: 10px;
}

.tile-button {
  width: 100%;
  height: 80px;
  border-radius: 12px;
  font-size: 2rem;
}

.neon-hover {
  transition: all 0.3s ease;
}

.neon-hover:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.control-button {
  width: 100%;
  border-radius: 12px;
}

.glow-effect {
  transition: all 0.3s ease;
}

.glow-effect:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}

.difficulty-selector {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.difficulty-select {
  width: 100%;
}

/* 响应式调整 */
@media screen and (max-width: 600px) {
  .game-wrapper {
    padding: 10px;
  }
  
  .game-title {
    font-size: 2rem;
  }
}
</style>